<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../src/xr-ui.css" />
    <title>按钮的设计与开发</title>
  </head>
  <body>
    <div class="xr-content">
      <!-- 标准按钮 -->
      <h2 class="xr-panel-title">标准按钮</h2>
      <div class="xr-panel-body">
        <br />
        <a href="" class="xr-btn">默认按钮</a>
        <br />
        <a href="" class="xr-btn xr-btn-primary">主操作按钮</a>
        <br />
        <a class="xr-btn xr-btn-warning">警示按钮</a>
        <br />
        <a class="xr-btn xr-btn-disabled">不可用按钮</a>
      </div>
      <!-- 大按钮 -->
      <h2 class="xr-panel-title">大按钮</h2>
      <div class="xr-panel-body">
        <br />
        <a href="" class="xr-btn xr-btn-large">默认按钮</a>
        <br />
        <a href="" class="xr-btn xr-btn-primary xr-btn-large">主操作按钮</a>
        <br />
        <a class="xr-btn xr-btn-warning xr-btn-large">警示按钮</a>
        <br />
        <a class="xr-btn xr-btn-disabled xr-btn-large">不可用按钮</a>
      </div>
      <!-- 小按钮 -->
      <h2 class="xr-panel-title">小按钮</h2>
      <div class="xr-panel-body">
        <a href="" class="xr-btn xr-btn-small">小按钮</a>

        <a href="" class="xr-btn xr-btn-primary xr-btn-small">主按钮</a>

        <a class="xr-btn xr-btn-warning xr-btn-small">警示按钮</a>

        <a class="xr-btn xr-btn-disabled xr-btn-small">不可用按钮</a>
      </div>
    </div>
  </body>
</html>
